<template>
	<view>
		<uni-forms
			:modelValue="_value"
			label-position="top"
			:rules="rules"
			ref="form"
		>
			<template
				v-for="item in forms.filter((t) => t.name !== 'AssociateForm')"
			>
				<div
					:class="{ readonly: isReadonly(item) }"
					:key="item.name"
					class="backf pt10 pb10 pl20 pr20 mt20 mb10"
					v-if="
						!isReadonly(item) ||
						(isReadonly(item) && _value[item.id] != undefined) ||
						(item.title === '用印套件' &&
							isReadonly(item) &&
							Object.keys(_value).length > 0)
					"
				>
					<seal-set
						ref="sealset"
						:value="_value[item.id]"
						v-if="item.title === '用印套件'"
					></seal-set>
					<uni-forms-item
						v-else-if="
							item.name !== 'SpanLayout' &&
							item.name !== 'Description' &&
							item.name !== 'TableList'
						"
						:name="item.id"
						:label="setTitle(item.name, item.title)"
						label-width="100%"
						:required="isRequired(item) && !isReadonly(item)"
					>
						<form-design-render
							:readonly="isReadonly(item)"
							:ref="item.id"
							:value="_value[item.id]"
							:mode="mode"
							:config="item"
							:placeholder="item.props.placeholder"
							:options="item.props.options"
							:expanding="item.props.expanding"
							@inputVal="getValue($event)"
							@setSingure="setSingure($event)"
						></form-design-render>
						<div
							v-if="
								isRequired(item) &&
								((!_value[item.id] && _value[item.id] !== 0) ||
									(_value[item.id] &&
										_value[item.id].length === 0)) &&
								isClickSumbit
							"
							style="color: red"
						>
							{{ rules[item.id][0].errorMessage }}
						</div>
					</uni-forms-item>
					<view v-if="item.name === 'TableList'">
						<table-list
							:config="item"
							:value="_value[item.id]"
							:rules="rules"
							@inputTableValue="inputTableValue($event)"
							:valueId="item.id"
							:readonly="isReadonly(item)"
							@setSingure="setSingure($event)"
							:isClickSumbit="isClickSumbit"
						></table-list>
					</view>
					<view v-if="item.name === 'Description'">
						<form-design-render :config="item"></form-design-render>
					</view>
				</div>
			</template>
		</uni-forms>
	</view>
</template>

<script>
import FormDesignRender from './FormDesignRender.vue'
import TableList from '../components/TableList.vue'
import SealSet from './SealSet.vue'
export default {
	components: { FormDesignRender, TableList, SealSet },
	props: {
		forms: {
			type: Array,
			default: () => {
				return []
			},
		},
		process: {
			type: Object,
			default: () => {
				return {}
			},
		},
		//当前节点，用来联动表单权限
		currentNode: {
			type: String,
			default: null,
		},
		value: {
			type: Object,
			default: () => {
				return {}
			},
		},
		mode: {
			type: String,
			default: 'MOBILE',
		},
		signatrueUrl: {
			type: String,
			default: '',
		},
		isClickSumbit: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			columnsList: [],
			columnValue: [],
			column: [],
		}
	},
	computed: {
		varifyInvoiceVOList() {
			return this.$store.state.varifyInvoiceVOList
		},
		_value: {
			get() {
				this.$store.commit('setBillList', this.value)
				return this.value
			},
		},
		rules() {
			let rules = {}
			this.loadFormConfig(this.forms, rules)
			return rules
		},
	},
	methods: {
		setTitle(name, title) {
			if (name === 'TJGJ_CW') {
				title = '报销明细'
			} else if (name === 'TJGJ_SK') {
				title = '收款账号'
			} else if (name === 'TJGJ_SPD') {
				title = '关联审批单'
			}
			return title
		},
		setSingure(value) {
			this.$emit('setSingure', value)
		},
		inputTableValue($event) {
			console.log($event)
			this.$emit('inputFormValue', { ...this._value, ...$event })
		},
		getValue(value) {
			this.$emit('inputFormValue', { ...this._value, ...value })
		},
		showItem(item) {
			return (
				!(
					this.isReadonly(item) && this.isBlank(this._value[item.id])
				) || item.name === 'SpanLayout'
			)
		},

		isBlank(val) {
			return (
				!this.$isNotEmpty(val) ||
				(val instanceof String && val.trim() === '') ||
				(Array.isArray(val) && val.length === 0)
			)
		},
		isReadonly(item) {
			return item.perm === 'R'
		},
		validate(call) {
			let success = true
			if (this.mode === 'MOBILE') {
				this.$refs.form.validate((valid) => {
					success = valid
					if (valid) {
						//校验成功再校验内部
						for (let i = 0; i < this.forms.length; i++) {
							if (this.forms[i].name === 'TableList') {
								let formRef = this.$refs[this.forms[i].id]
								if (
									formRef &&
									Array.isArray(formRef) &&
									formRef.length > 0
								) {
									formRef[0].validate((subValid) => {
										success = subValid
									})
									if (!success) {
										break
									}
								}
							}
						}
					}
					call(success)
				})
			}
		},
		loadFormConfig(forms, rules) {
			forms.forEach((item) => {
				if (item.name === 'SpanLayout') {
					this.loadFormConfig(item.props.items, rules)
				} else {
					this.$set(this._value, item.id, this.value[item.id])
					if (item.props?.modelBiz === 'timeArea') {
						this.$store.commit('setTimeAreaId', item.id)
					}
					if (item.props?.required) {
						this.$set(rules, item.id, [
							{
								type:
									item.valueType === 'Array'
										? 'array'
										: undefined,
								required: true,
								errorMessage: `请填写${item.title}`,
								trigger: 'blur',
							},
						])
					} else if (item.name === 'TJGJ_SK') {
						this.$set(this._value, item.id, this.value[item.id])
						item.columns?.forEach((list, index) => {
							if (index === 0) {
								if (list.props?.required) {
									this.$set(rules, item.id, [
										{
											type:
												item.valueType === 'Array'
													? 'array'
													: undefined,
											required: true,
											errorMessage: `请填写收款账号`,
											trigger: 'blur',
										},
									])
								}
							}
						})
					} else if (item.name === 'TJGJ_CW') {
						this.$set(
							this._value,
							item.id,
							this.value[item.id] ? this.value[item.id] : []
						)
						this.$set(rules, item.id, [
							{
								type:
									item.valueType === 'Array'
										? 'array'
										: undefined,
								required: true,
								errorMessage: `请填写报销明细`,
								trigger: 'blur',
							},
						])
						this.$store.commit('setCwId', item.id)
						this.$store.commit('setIsDetail', true)
						item.columns?.forEach((item) => {
							if (item.modelBiz === 'category') {
								this.$store.commit('setInvoiceInfo', {
									type: 'parentId',
									value: item?.option ? item.option : '',
								})
							}
						})
					} else if (item.name === 'TJGJ_SPD') {
						this.$set(
							this._value,
							item.id,
							this.value[item.id] || []
						)
						this.$store.commit('setInvoiceInfo', {
							type: 'type',
							value: 1,
						})
						item.columns?.forEach((list, index) => {
							if (index === 0) {
								if (list.props?.required) {
									this.$set(rules, item.id, [
										{
											type:
												item.valueType === 'Array'
													? 'array'
													: undefined,
											required: true,
											errorMessage: `请填写${item.title}`,
											trigger: 'blur',
										},
									])
								}
								if (list.props?.options[0]?.formId) {
									this.$store.commit(
										'setFormId',
										list.props.options[0].formId
									)
								}
							}
						})
					}
				}
			})
		},
		isRequired(item) {
			return this.rules[item.id] !== undefined
		},
	},
	watch: {
		varifyInvoiceVOList(val) {
			if (val.length > 0) {
				let selectId = []
				let newVal = []
				let obj = JSON.parse(
					JSON.stringify(
						this.$store.state.billList[this.$store.state.cwId]
					)
				)
				val.forEach((item) => {
					selectId.push(item.id)
				})
				obj.forEach((item) => {
					let threeObj = item.threeObj
					for (let key in threeObj) {
						let fileList = threeObj[key].fileList
						fileList.forEach((list, inx) => {
							let selectIndex = selectId.indexOf(list.id)
							console.log('selectIndex > -1', selectIndex > -1)
							if (selectIndex > -1) {
								threeObj[key].fileList[inx] = {
									...list,
									tags: val[selectIndex].tags,
								}
							}
						})
					}
					newVal.push(threeObj)
				})
				console.log('varifyInvoiceVOList', obj)
				this.$set(this._value, this.$store.state.cwId, obj)
			}
		},
	},
}
</script>
<style scoped lang="scss">
.readonly {
	margin-top: -20rpx;
}

::v-deep .uni-select__input-placeholder {
	font-size: 24rpx !important;
}
</style>
